<template>
  <el-dialog v-model="show"
             title="选择图标"
             top="20px"
             width="800"
             append-to-body>
    <el-row class="container">
      <el-card class="icon hand-cursor m-r-5 m-b-5 center-flex"
               shadow="hover"
               v-for="(icon,index) in icons"
               :key="index"
               @click="selectIcon(icon)">
        <el-row class="center-text"><span class="iconfont" :class="[`iaiai-${icon}`]" /></el-row>
        <el-row class="center-text m-t-5 f11">{{icon}}</el-row>
      </el-card>
    </el-row>
  </el-dialog>
</template>

<script lang="ts" setup>
import {defineExpose, ref, defineEmits} from "vue"

const show = ref(false)
const emit = defineEmits(['selectIcon'])
const icons = ref([
  "zoom-out",
  "zoom-in",
  "question",
  "question-fill",
  "star-fill",
  "star",
  "correct",
  "expend",
  "compress",
  "whatsapp",
  "switchuser",
  "bug",
  "bug-fill",
  "audio-fill",
  "audio",
  "alipay-square-fill",
  "taobao-circle-fill",
  "qq-circle-fill",
  "github-fill",
  "alipay-circle-fill",
  "chrome-fill",
  "wechat-fill",
  "weibo",
  "skype-fill",
  "twitter",
  "qq",
  "windows-fill",
  "html-fill",
  "apple-fill",
  "android-fill",
  "dropbox",
  "codepen",
  "slack",
  "config-fill",
  "tags-fill",
  "alert-fill",
  "contacts-fill",
  "idcard-fill",
  "image-fill",
  "calendar-check-fill",
  "snippets-fill",
  "file-copy-fill",
  "diff-fill",
  "file-image-fill",
  "file-pdf-fill",
  "file-zip-fill",
  "file-word-fill",
  "file-unknown-fill",
  "file-ppt-fill",
  "file-text-fill",
  "file-markdown-fill",
  "file-excel-fill",
  "file-fill",
  "file-add-fill",
  "file-exclamation-fil",
  "fullscreen-exit",
  "fullscreen",
  "poweroff",
  "earth",
  "circle-location",
  "proposal-approval",
  "authorization",
  "approval",
  "caveat",
  "node",
  "technical-services",
  "features",
  "scenes",
  "debugging",
  "arrow-up-fill",
  "arrow-left-fill",
  "comment-fill-light",
  "comment-light",
  "scan-light",
  "subscription",
  "medal",
  "medalfill",
  "goodsnew",
  "goodsnewfill",
  "piclight",
  "musicforbidfill",
  "musicfill",
  "tag",
  "tagfill",
  "community",
  "communityfill",
  "repairfill",
  "repair",
  "picfill",
  "apps",
  "pullright",
  "pullleft",
  "countdown",
  "countdownfill",
  "copy",
  "mobilefill",
  "sort",
  "appreciatefill",
  "selectionfill",
  "add",
  "unlock",
  "lock",
  "home-fill",
  "home",
  "deletefill",
  "moreandroid",
  "notification",
  "notificationfill",
  "like",
  "likefill",
  "camera",
  "camerafill",
  "warn",
  "warnfill",
  "time",
  "timefill",
  "roundright",
  "roundrightfill",
  "roundclose",
  "roundclosefill",
  "roundcheck",
  "roundcheckfill",
  "location",
  "locationfill",
  "appreciate",
  "signal-fill",
  "service-fill",
  "people-fill",
  "new-people",
  "meeting-fill",
  "discovery-fill",
  "exchange-fill",
  "conf-video-fill",
  "mail-fill",
  "boss-fill",
  "video",
  "voipphone",
  "sport",
  "subordinate",
  "qrcode",
  "railway",
  "qq-outline",
  "im-keyboard",
  "homepage",
  "glass",
  "at",
  "women-wear",
  "arrow-to-top",
  "arrow-to-top-off",
  "arrow-to-bottom",
  "repayment",
  "contact",
  "taxi",
  "truck",
  "paper-plane",
  "receivables",
  "game",
  "stock",
  "pay-intimate",
  "pay-in-person",
  "credit-card",
  "transfer",
  "yu-ebao",
  "rotating-90",
  "adjust",
  "brightness",
  "temperature",
  "link",
  "block",
  "block-outline",
  "edit-file",
  "people-dept",
  "people-dept-outline",
  "custom",
  "custom-outline",
  "sound",
  "sound-off",
  "shopping-cart",
  "icon-qq",
  "unicom",
  "ccb",
  "jd",
  "icbc",
  "phonenix-tv",
  "dragon-tv",
  "ct",
  "volkswagen",
  "baidu",
  "cnbeta",
  "rotating",
  "share",
  "user",
  "visibilityoff",
  "visibility",
  "localphone",
  "linearscale",
  "layers",
  "localairport",
  "livetv",
  "keyboardhide",
  "laptopmac",
  "insertinvitation",
  "keyboard",
  "groupadd",
  "fileupload",
  "filedownload",
  "edit",
  "directionssubway",
  "directionsrailway",
  "directionsferry",
  "directionsbus",
  "directionsbike",
  "desktopmac",
  "delete",
  "contentpaste",
  "airlineseatindividualsuite",
  "airlineseatflatangled",
  "airlineseatflat",
  "accessible",
  "accessibility",
  "pencil-off",
  "pencil-lock",
  "keyboard-variant",
  "heart-pulse",
  "fingerprint",
  "database-plus",
  "database-minus",
  "database",
  "cube-outline",
  "cube",
  "content-cut",
  "contacts",
  "cloud-sync",
  "cloud-upload",
  "cloud-outline-off",
  "cloud-download",
  "chevron-double-up",
  "chevron-double-right",
  "chevron-double-left",
  "chevron-double-down",
  "buffer",
  "blur",
  "bluetooth-transfer",
  "bluetooth-settings",
  "bluetooth-off",
  "bluetooth-connect",
  "battery-unknown",
  "battery-plus",
  "battery-positive",
  "battery-negative",
  "battery-outline",
  "battery-minus",
  "battery-charging-100",
  "battery-charging-90",
  "battery-charging-80",
  "battery-charging-60",
  "battery-charging-40",
  "battery-charging-30",
  "battery-charging-20",
  "battery-charging",
  "battery-alert",
  "battery-90",
  "battery-80",
  "battery-70",
  "battery-60",
  "battery-50",
  "battery-40",
  "battery-30",
  "battery-20",
  "battery-10",
  "battery",
  "barcode",
  "account-switch",
  "account-star-variant",
  "account-search",
  "account-settings-variant",
  "account-settings",
  "account-star",
  "account-remove",
  "account-outline",
  "account-off",
  "account-network",
  "account-plus",
  "account-multiple-outline",
  "account-multiple-plus",
  "account-multiple-minus",
  "account-multiple",
  "account-location",
  "account-minus",
  "account-circle",
  "account-convert",
  "account-key",
  "account-check",
  "account",
  "account-card-details",
  "account-alert",
  "access-point-network",
  "account-box",
  "account-box-outline",
  "access-point",
  "ios-people",
  "menu",
  "logout",
  "login",
  "right",
  "back",
  "config",
  "code",
  "trash",
  "log",
  "md-log",
  "news",
  "preview-line",
  "export",
  "ingredient",
  "pulse",
  "tongue",
  "clinic",
  "diagnosis",
  "doctor",
  "abc",
  "boc",
  "psbc",
  "bcm",
  "zhongxin",
  "zhaoshang",
  "pufa",
  "minsheng",
  "guangda",
  "video1",
  "courses",
  "teacher",
  "student",
  "parents",
  "coupon",
  "withdrawal",
  "voice",
  "sort-vertical-1",
  "sort-horizontal-1",
  "sort-vertical-2",
  "sort-vertical-3",
  "wechat-pay",
  "coin",
  "ios-analytics",
  "md-analytics",
  "analytics-graph-bar2",
  "analytics-graph-bar1",
  "analytics-graph-bar",
  "chart-pie",
  "chart-bar",
  "chart-pie1",
  "chart-line",
  "disk",
  "cpu",
  "ram",
  "internet",
  "theme",
  "small-bell",
  "arrow-down",
  "store",
  "search",
  "female",
  "male",
  "sex",
  "tip",
  "refresh",
  "cancel-top",
  "detail",
  "zhongjiangliebiao",
  "hot",
  "fold",
  "files",
  "expand",
  "apple",
  "aim",
  "arrow-up-bold",
  "arrow-up",
  "arrow-right-bold",
  "arrow-right",
  "arrow-left-bold",
  "arrow-left",
  "arrow-down-bold",
  "arrow-down1",
  "user-filled",
  "user1",
  "close-bold",
  "close",
  "ic-translate-CN1",
  "setting3",
  "qiyeguanli",
  "gongxiangliuliangbao",
  "hongbao",
  "tixian",
  "shanchu",
  "phone",
  "phone-fill",
])

function showComp(){
  show.value = true
}

function selectIcon(icon:string){
  emit("selectIcon",icon)
  show.value = false
}

defineExpose({
  showComp,
})
</script>

<style lang="scss" scoped>
.container{
  flex-wrap: wrap;

  .icon{
    width: 120px;
    height: 120px;

    span{
      font-size: 30px;
    }
  }
}
</style>
